<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <style>
        ::-webkit-scrollbar {  
		    display: none;  
		}
        .btnstyle{
            width: 100px;
            height: 30px;
        }
    </style>
</head>
<body>

<fieldset class="table-search-fieldset" style="background-color:white;border:solid 1px #EEEEEE">
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-row">

                    <div class="layui-col-md1">
                        <label class="layui-form-label" lay-over="over">关键字查询</label>
                    </div>

                    <div class="layui-col-md4">
                        <input type="text" name="querykey"  placeholder="优惠券ID查询优惠信息" autocomplete="off" class="layui-input">
                    </div>


                    <div class="layui-col-md2 layui-col-md-offset1">
                        <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                    </div>

                </div>

            </div>
        </form>
    </div>
</fieldset>

<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>


<!-- 表格操作栏 -->

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn btnstyle"  style="background-color:#339999;" id='add'  lay-event="add" > <img src="../images/优惠卷 (1).png" alt="" style="width: 24px;margin-left: -3.5px;"> 优惠卷添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><img src="../images/修改 (1).png"  style="width: 24px;margin-left: -1px;margin-top: -3px;"></a>   
    </div>
</script>


<!-- 表格按钮 -->
<script type="text/html" id="ID-table-demo-templet-switch">
    <!-- 这里的 checked 的状态值判断仅作为演示 -->
    <input type="checkbox" name="status" value="{{= d.couponStatus }}" title="热|" lay-skin="switch" lay-filter="demo-templet-status" {{= d.couponStatus == 1 ? "checked" : "" }}>
</script>

<!-- 表格按钮 -->
<script type="text/html" id="couponGoStatus">
    <!-- 这里的 checked 的状态值判断仅作为演示 -->
    <input type="checkbox" name="status" value="{{= d.couponGoStatus }}" title="热|" lay-skin="switch" lay-filter="demo-templet-status" {{= d.couponGoStatus == 1 ? "checked" : "" }}>
</script>

<script type="text/html" id="v-pic">
    <img id="vpicture" class=".layer-mask" src="{{'http://26.83.14.212:5501/'+d.couponPicture}}" ondblclick="bigimg(this)" style="width:70px;height:50px; title:'点击放大'; cursor: pointer;">
</script>

     

<script>
    var requrl="http://localhost:8080/restaurant_web_war_exploded/";
    layui.use(['table', 'dropdown'], function(){
        let table = layui.table;
        let dropdown = layui.dropdown;
        let form = layui.form;
        let layer = layui.layer;
        let laydate = layui.laydate;
        let upload = layui.upload;
        let $ = layui.jquery;

        
      
        bigimg=function (e){
            layer.photos({
                 photos: { "data": [{"src": e.src}]},
                 shade: [0.7,'#fff']
          });   
        }
        //图片查看   
        //图片查看   
        // 创建渲染实例
        table.render({
            elem: '#test',
            url:requrl+"coupons/listCoupons", // 此处为静态模拟数据，实际使用时需换成真实接口
            totalRow: true, // 开启合计行
            toolbar: '#toolbarDemo',
            where:{
                pageNum:1,
                pageSize:5
            },
            page: true,
            cols: [[
                {field:'couponId', fixed: 'left', title: 'ID',width:70},
                {field:'couponName', title:'优惠券名称'},
                {field:'couponTypeId',title:'优惠卷类型',templet:function(d){
                      return d.couponTypeId==1?'折扣卷':(d.couponTypeId==2?'满减卷':'套餐卷');  
                }},
                {field:'couponRemark', title:'说明'},   
                {field:'couponPreferential', title:'优惠力度',width:90},
                {field:'couponCondition', title:'满足条件',width:90},
                {title:'优惠卷',width: 120,templet:'#v-pic'},
                {title:'状态(是否上架)',templet:'#ID-table-demo-templet-switch',width:100},
                {title:'状态(是否支持配送)',templet:'#couponGoStatus',width:100},
                {field:'couponStartTime',title:'起始时间',width:120},
                {field:'couponEndTime',title:'结束时间',width:120},
                {fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]],
            parseData:function(res){
                // total=res.data.total;
                return{
                    code: 0, //解析接口状态
                    msg: res.message, //解析提示文本
                    count: res.data.total, //解析数据长度
                    data: res.data.list //解析数据列表
                }
            }
        });

        window.addEventListener('message', function(event) {  
        if (event.data === 'success') {  
            table.reload('test');
            layer.msg("优惠卷添加成功!!!",{icon:6,time:1000},function (){
            })
        }  
        }, false);   

        // 触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            let data = obj.data; // 获得当前行数据
            // console.log(obj)
            if(obj.event === 'edit'){
                layer.msg("......")
            } else if(obj.event === 'more'){
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '查看',
                        id: 'detail'
                    },{
                        title: '删除',
                        id: 'del'
                    }],
                    click: function(menudata){
                        if(menudata.id === 'detail'){
                            layer.msg('查看操作，当前行 ID:'+ data.id);
                        } else if(menudata.id === 'del'){
                            layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
                                obj.del(); // 删除对应行（tr）的DOM结构
                                layer.close(index);
                                // 向服务端发送删除指令
                            });
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });

        //添加优惠卷
        $("#add").on('click',function(){
            layer.open({
                type:2,
                title:'添加优惠卷',
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content:'couponsInfo_add.html',
            })
        });

    });
</script>

</body>
</html>